<template>
  <div class="pet-knowledge-page">
    <!-- 页面头部 -->
    <div class="knowledge-header">
      <div class="header-content">
        <h1>宠物知识百科</h1>
        <p>探索专业的养宠知识，让您的爱宠更健康、更快乐</p>
      </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-container">
        <input 
          type="text" 
          v-model="searchQuery"
          placeholder="搜索宠物知识..."
          class="search-input"
          @input="handleSearch"
        />
        <button class="search-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 2C6.03 2 2 6.03 2 11C2 15.97 6.03 20 11 20C15.97 20 20 15.97 20 11C20 6.03 15.97 2 11 2ZM11 18C7.14 18 4 14.86 4 11C4 7.14 7.14 4 11 4C14.86 4 18 7.14 18 11C18 14.86 14.86 18 11 18ZM20.41 20.41L16.71 16.71C18.17 15.23 19 13.28 19 11C19 6.59 15.41 3 11 3C6.59 3 3 6.59 3 11C3 15.41 6.59 19 11 19C13.28 19 15.23 18.17 16.71 16.71L20.41 20.41Z" fill="currentColor"/>
          </svg>
          搜索
        </button>
      </div>
    </div>
    
    <!-- 分类导航 -->
    <div class="categories-section">
      <div class="container">
        <h2>知识分类</h2>
        <div class="categories-grid">
          <div 
            v-for="category in categories"
            :key="category.id"
            class="category-card"
            @click="navigateToCategory(category.id)"
          >
            <div class="category-icon" :style="{ backgroundColor: category.color }">
              <component :is="category.icon" />
            </div>
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
            <span class="article-count">{{ category.articleCount }} 篇文章</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 精选文章 -->
    <div class="featured-section">
      <div class="container">
        <div class="section-header">
          <h2>精选文章</h2>
          <button class="view-more-btn" @click="viewAllArticles">查看全部</button>
        </div>
        
        <div class="articles-grid">
          <div 
            v-for="article in featuredArticles"
            :key="article.id"
            class="article-card"
            @click="viewArticleDetail(article.id)"
          >
            <div class="article-image">
              <img :src="article.image" :alt="article.title" />
              <span class="article-category">{{ article.category }}</span>
            </div>
            <div class="article-info">
              <h3>{{ article.title }}</h3>
              <p class="article-excerpt">{{ article.excerpt }}</p>
              <div class="article-meta">
                <span class="publish-date">{{ article.publishDate }}</span>
                <span class="read-count">{{ article.readCount }} 阅读</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 热门问题 -->
    <div class="faq-section">
      <div class="container">
        <h2>热门问题</h2>
        <div class="faq-list">
          <div 
            v-for="faq in faqs"
            :key="faq.id"
            class="faq-item"
            @click="toggleFaq(faq.id)"
          >
            <div class="faq-question">
              <h3>{{ faq.question }}</h3>
              <div class="faq-icon" :class="{ active: activeFaq === faq.id }">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
                </svg>
              </div>
            </div>
            <div class="faq-answer" v-show="activeFaq === faq.id">
              <p>{{ faq.answer }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 订阅区域 -->
    <div class="subscribe-section">
      <div class="container">
        <div class="subscribe-content">
          <h2>订阅宠物知识</h2>
          <p>定期获取最新的宠物养护知识、健康资讯和训练技巧</p>
          <div class="subscribe-form">
            <input 
              type="email" 
              v-model="email"
              placeholder="请输入您的邮箱"
              class="subscribe-input"
            />
            <button class="subscribe-btn" @click="subscribe">立即订阅</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 搜索查询
const searchQuery = ref('')

// 邮箱订阅
const email = ref('')

// 激活的FAQ
const activeFaq = ref(null)

// 分类数据
const categories = reactive([
  {
    id: 'diet',
    name: '饮食营养',
    description: '科学喂养，为宠物提供均衡的营养',
    color: '#FF6B6B',
    icon: 'DietIcon',
    articleCount: 48
  },
  {
    id: 'health',
    name: '健康医疗',
    description: '预防疾病，保障宠物健康成长',
    color: '#4ECDC4',
    icon: 'HealthIcon',
    articleCount: 36
  },
  {
    id: 'training',
    name: '行为训练',
    description: '培养良好习惯，增进与宠物的沟通',
    color: '#FFD166',
    icon: 'TrainingIcon',
    articleCount: 24
  },
  {
    id: 'grooming',
    name: '日常护理',
    description: '清洁美容，保持宠物整洁舒适',
    color: '#6A0572',
    icon: 'GroomingIcon',
    articleCount: 18
  },
  {
    id: 'breed',
    name: '品种特性',
    description: '了解不同宠物品种的特点和需求',
    color: '#1A535C',
    icon: 'BreedIcon',
    articleCount: 32
  },
  {
    id: 'environment',
    name: '生活环境',
    description: '为宠物创造安全舒适的生活空间',
    color: '#F7B801',
    icon: 'EnvironmentIcon',
    articleCount: 22
  }
])

// 精选文章数据
const featuredArticles = reactive([
  {
    id: 1,
    title: '狗狗科学饮食指南：不同年龄段的营养需求',
    excerpt: '了解狗狗在幼年、成年和老年阶段的不同营养需求，为您的爱宠提供最适合的饮食方案。',
    image: '@/assets/pixel-pets.png',
    category: '饮食营养',
    publishDate: '2023-10-10',
    readCount: 1258
  },
  {
    id: 2,
    title: '猫咪常见健康问题及预防措施',
    excerpt: '掌握猫咪常见疾病的早期症状和预防方法，让您的猫咪保持健康活力。',
    image: '@/assets/pixel-cats.png',
    category: '健康医疗',
    publishDate: '2023-09-28',
    readCount: 985
  },
  {
    id: 3,
    title: '幼犬基础训练：从服从指令到社交化',
    excerpt: '通过科学的训练方法，帮助幼犬建立良好的行为习惯，顺利融入家庭生活。',
    image: '@/assets/1.png',
    category: '行为训练',
    publishDate: '2023-09-15',
    readCount: 842
  },
  {
    id: 4,
    title: '猫咪日常护理：毛发梳理与口腔清洁',
    excerpt: '学习正确的猫咪护理方法，保持猫咪的毛发健康和口腔卫生。',
    image: '@/assets/2.png',
    category: '日常护理',
    publishDate: '2023-09-05',
    readCount: 721
  }
])

// 热门问题数据
const faqs = reactive([
  {
    id: 1,
    question: '如何判断狗狗是否健康？',
    answer: '观察狗狗的精神状态、食欲、排便情况和体重变化是判断健康的重要指标。健康的狗狗应该充满活力，有良好的食欲，排便规律且成形，体重稳定。此外，还要注意检查狗狗的眼睛、耳朵、鼻子和皮肤是否有异常。'
  },
  {
    id: 2,
    question: '猫咪为什么会突然不进食？',
    answer: '猫咪不进食可能是由多种原因引起的，包括健康问题（如口腔疾病、消化系统问题）、食物不喜欢、环境变化或压力等。如果猫咪超过24小时不进食，建议及时咨询兽医，因为长时间不进食可能会导致严重的健康问题。'
  },
  {
    id: 3,
    question: '如何正确训练狗狗定点排便？',
    answer: '训练狗狗定点排便需要耐心和一致性。首先选择一个固定的排便地点，在狗狗饭后、起床后或玩耍后带它到该地点。当狗狗在正确的地点排便时，及时给予奖励和表扬。如果狗狗在错误的地点排便，不要惩罚它，而是将它带到正确的地点，并清理错误地点的气味。'
  },
  {
    id: 4,
    question: '如何减少猫咪掉毛？',
    answer: '定期梳理猫咪的毛发可以有效减少掉毛，特别是在换毛季节。选择适合猫咪毛发类型的梳子，每天梳理5-10分钟。此外，保持猫咪的饮食均衡，提供富含Omega-3脂肪酸的食物，也有助于减少掉毛。保持室内环境清洁，定期打扫也能帮助控制毛发问题。'
  }
])

// 搜索处理
const handleSearch = () => {
  // 这里可以添加搜索逻辑
  console.log('搜索关键词：', searchQuery.value)
  // 例如：根据搜索关键词过滤文章和FAQ
}

// 导航到分类页面
const navigateToCategory = (categoryId) => {
  router.push(`/pet-knowledge/${categoryId}`)
}

// 查看所有文章
const viewAllArticles = () => {
  router.push('/pet-knowledge/articles')
}

// 查看文章详情
const viewArticleDetail = (articleId) => {
  router.push(`/pet-knowledge/article/${articleId}`)
}

// 切换FAQ显示/隐藏
const toggleFaq = (faqId) => {
  if (activeFaq.value === faqId) {
    activeFaq.value = null
  } else {
    activeFaq.value = faqId
  }
}

// 订阅处理
const subscribe = () => {
  if (email.value) {
    // 这里可以添加订阅逻辑
    console.log('订阅邮箱：', email.value)
    // 例如：调用API发送订阅请求
    alert('订阅成功！感谢您关注我们的宠物知识内容。')
    email.value = ''
  } else {
    alert('请输入有效的邮箱地址。')
  }
}

// 定义图标组件
const defineComponent = (name, path) => {
  const component = {
    name,
    template: `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="${path}" fill="currentColor"/>
    </svg>`
  }
  return component
}

// 饮食营养图标
const DietIcon = defineComponent('DietIcon', 'M3 11H21V13H3V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z')

// 健康医疗图标
const HealthIcon = defineComponent('HealthIcon', 'M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.59L18 9L10 17Z')

// 行为训练图标
const TrainingIcon = defineComponent('TrainingIcon', 'M9 21C8.45 21 7.97903 20.7893 7.58787 20.4121C7.1967 20.0349 7 19.55 7 19V15H5C3.9 15 3 14.1 3 13V11C3 9.9 3.9 9 5 9H7V5C7 4.45 7.1967 3.96511 7.58787 3.58787C7.97903 3.21063 8.45 3 9 3H15C15.55 3 16.0349 3.21063 16.4121 3.58787C16.7943 3.96511 17 4.45 17 5V9H19C20.1 9 21 9.9 21 11V13C21 14.1 20.1 15 19 15H17V19C17 19.55 16.7943 20.0349 16.4121 20.4121C16.0349 20.7893 15.55 21 15 21H9ZM9 5H15V9H9V5ZM19 13H5V11H19V13ZM17 19V15H7V19H17Z')

// 日常护理图标
const GroomingIcon = defineComponent('GroomingIcon', 'M12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16ZM12 18C9.33 18 3 16.21 3 12C3 9.9 3.84 8.03 5.24 6.57L3.76 5.09C2.25 6.88 1 9.21 1 12C1 17.52 5.48 22 11 22V20C7.14 20 4 17.86 4 15H10V18H12Z')

// 品种特性图标
const BreedIcon = defineComponent('BreedIcon', 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 14.5C9.48 14.5 7.5 12.52 7.5 10C7.5 7.48 9.48 5.5 12 5.5C14.52 5.5 16.5 7.48 16.5 10C16.5 12.52 14.52 14.5 12 14.5ZM16.24 16.24C14.95 17.52 13.05 18.5 11 18.5C8.95 18.5 7.05 17.52 5.76 16.24C5.32 15.8 5.03 15.23 5 14.64V17.5C5 18.03 5.21 18.54 5.58 18.91C5.96 19.29 6.47 19.5 7 19.5H17C17.53 19.5 18.04 19.29 18.42 18.91C18.79 18.54 19 18.03 19 17.5V14.64C18.97 15.23 18.68 15.8 18.24 16.24Z')

// 生活环境图标
const EnvironmentIcon = defineComponent('EnvironmentIcon', 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 7C13.66 7 15 8.34 15 10C15 11.66 13.66 13 12 13C10.34 13 9 11.66 9 10C9 8.34 10.34 7 12 7ZM12 11C12.55 11 13 10.55 13 10C13 9.45 12.55 9 12 9C11.45 9 11 9.45 11 10C11 10.55 11.45 11 12 11ZM12 16.2C13.77 16.2 15.2 14.77 15.2 13C15.2 11.23 13.77 9.8 12 9.8C10.23 9.8 8.8 11.23 8.8 13C8.8 14.77 10.23 16.2 12 16.2Z')
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --secondary-color: #4CAF50;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.pet-knowledge-page {
  min-height: 100vh;
  background-color: var(--background-light);
}

/* 页面头部 */
.knowledge-header {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  overflow: hidden;
}

.knowledge-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/pixel-pets.png');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
}

.header-content h1 {
  font-size: 48px;
  margin: 0 0 16px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-content p {
  font-size: 20px;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 搜索区域 */
.search-section {
  background-color: var(--white);
  padding: 30px 0;
  box-shadow: var(--shadow);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  padding: 0 20px;
}

.search-input {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 16px;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.1);
}

.search-btn {
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.search-btn:hover {
  background-color: var(--primary-hover);
}

/* 容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 分类区域 */
.categories-section {
  padding: 60px 0;
}

.categories-section h2 {
  font-size: 32px;
  color: var(--text-primary);
  margin: 0 0 40px 0;
  text-align: center;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.category-card {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.category-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--white);
}

.category-card h3 {
  font-size: 24px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.category-card p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.article-count {
  font-size: 14px;
  color: var(--text-light);
  display: block;
}

/* 精选文章区域 */
.featured-section {
  padding: 40px 0 60px;
  background-color: var(--white);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin: 0;
}

.view-more-btn {
  padding: 8px 20px;
  background: none;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.view-more-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

.article-card {
  background-color: var(--background-light);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.article-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card:hover .article-image img {
  transform: scale(1.05);
}

.article-category {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  background-color: var(--primary-color);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
}

.article-info {
  padding: 20px;
}

.article-info h3 {
  font-size: 20px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.article-excerpt {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-light);
}

/* 热门问题区域 */
.faq-section {
  padding: 60px 0;
}

.faq-section h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin: 0 0 30px 0;
  text-align: center;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 16px;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
}

.faq-question:hover {
  background-color: rgba(255, 127, 0, 0.05);
}

.faq-question h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-icon.active {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 20px 20px;
}

.faq-answer p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* 订阅区域 */
.subscribe-section {
  padding: 60px 0;
  background-color: var(--primary-color);
  color: var(--white);
}

.subscribe-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.subscribe-content h2 {
  font-size: 28px;
  margin: 0 0 12px 0;
}

.subscribe-content p {
  font-size: 18px;
  margin: 0 0 24px 0;
  opacity: 0.9;
}

.subscribe-form {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.subscribe-input {
  padding: 12px 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: var(--transition);
  flex: 1;
  max-width: 400px;
}

.subscribe-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.subscribe-input:focus {
  outline: none;
  border-color: var(--white);
  background-color: rgba(255, 255, 255, 0.2);
}

.subscribe-btn {
  padding: 12px 32px;
  background-color: var(--white);
  color: var(--primary-color);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.subscribe-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content h1 {
    font-size: 40px;
  }
  
  .categories-grid,
  .articles-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (max-width: 768px) {
  .knowledge-header {
    height: 250px;
  }
  
  .header-content h1 {
    font-size: 32px;
  }
  
  .header-content p {
    font-size: 18px;
  }
  
  .search-container {
    flex-direction: column;
  }
  
  .search-btn {
    justify-content: center;
  }
  
  .categories-section {
    padding: 40px 0;
  }
  
  .categories-section h2,
  .section-header h2,
  .faq-section h2,
  .subscribe-content h2 {
    font-size: 24px;
  }
  
  .featured-section {
    padding: 30px 0 40px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .faq-section {
    padding: 40px 0;
  }
  
  .subscribe-section {
    padding: 40px 0;
  }
  
  .subscribe-form {
    flex-direction: column;
  }
  
  .subscribe-input {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .knowledge-header {
    height: 200px;
  }
  
  .header-content h1 {
    font-size: 28px;
  }
  
  .header-content p {
    font-size: 16px;
  }
  
  .categories-grid,
  .articles-grid {
    grid-template-columns: 1fr;
  }
  
  .category-card,
  .article-card {
    margin-bottom: 20px;
  }
  
  .faq-question h3 {
    font-size: 16px;
  }
  
  .subscribe-content p {
    font-size: 16px;
  }
}
</style>